<template>
  <div class="projects-section">
    <div class="projects-section-header">
      <p>项目</p>
      <p class="time">12月12日</p>
    </div>
    <div class="projects-section-line">
      <div class="projects-status">
        <div class="item-status">
          <span class="status-number">{{projs.length}}</span>
          <span class="status-type">进行中</span>
        </div>
        <div class="item-status">
          <span class="status-number">0</span>
          <span class="status-type">待审核</span>
        </div>
        <div class="item-status">
          <span class="status-number">{{ projs.length }}</span>
          <span class="status-type">总数</span>
        </div>
      </div>
      <div class="view-actions">
        <button class="view-btn list-view" title="List View">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
            <line x1="8" y1="6" x2="21" y2="6" />
            <line x1="8" y1="12" x2="21" y2="12" />
            <line x1="8" y1="18" x2="21" y2="18" />
            <line x1="3" y1="6" x2="3.01" y2="6" />
            <line x1="3" y1="12" x2="3.01" y2="12" />
            <line x1="3" y1="18" x2="3.01" y2="18" /></svg>
        </button>
        <button class="view-btn grid-view active" title="Grid View">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid">
            <rect x="3" y="3" width="7" height="7" />
            <rect x="14" y="3" width="7" height="7" />
            <rect x="14" y="14" width="7" height="7" />
            <rect x="3" y="14" width="7" height="7" /></svg>
        </button>
      </div>
    </div>
    <div class="project-boxes jsGridView">
      <div class="project-box-wrapper" v-for="(value,index ) in projs" :key="index">
        <div class="project-box" :style="{background: colors[index%colors.length]}">
          <div class="project-box-header">
            <span>{{ value.createTime }}</span>
            <div class="more-wrapper">
              <button class="project-btn-more">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="12" cy="5" r="1" />
                  <circle cx="12" cy="19" r="1" /></svg>
              </button>
            </div>
          </div>
          <div class="project-box-content-header">
            <p class="box-content-header">{{value.projName}}</p>
            <p class="box-content-subheader">{{value.desc}}</p>
          </div>
          <div class="box-progress-wrapper">
            <p class="box-progress-header">项目进度</p>
            <div class="box-progress-bar">
              <span class="box-progress" :style="{width: value.progress + '%', background: '#ff942e'}"></span>
            </div>
            <p class="box-progress-percentage">{{value.progress}}%</p>
          </div>
          <div class="project-box-footer">
            <div class="participants">
              <img :src="developer.imageIcon" alt="participant" v-for="(developer,index) in value.developers">
              <button class="add-participant" style="color: #ff942e;">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
                  <path d="M12 5v14M5 12h14" />
                </svg>
              </button>
            </div>

            <div class="days-left" style="color: #ff942e;">
              项目已进行：{{myMoment.to(value.createTime.replace('年','-').replace('月','-').replace('日',''),true)}}
              <a :href="value.targetUrl" style="font-family: cr英文字体;"> ▫GO▫</a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import moment from 'moment'
moment.locale('zh-cn'); // 默认的语言环境为英语。


export default {
  name: "ProjectCom",
  data(){
    return{
      myMoment:moment(),
      colors:[
        '#fee4cb',
        '#e9e7fd',
        '#dbf6fd',
        '#ffd3e2',
        '#c8f7dc',
        '#d5deff'
      ],
      projs:[
        {
          createTime:'2021年4月23日',
          projName:'中俄学院网站项目',
          desc:'为中俄学院提供可用网站,长春大学中俄学院\n学院主要承担学校中俄合作办学项目建设、教学运行及学生管理工作。设有教学管理办公室和学生工作办公室，专门负责中俄合作办学项目的实施及管理。',
          progress:75,
          developers:[
            {imageIcon:'https://iconfont.alicdn.com/t/4aa049ad-74b3-434c-85dd-38219b7d653f.png', nickName:'小鳄鱼在洗澡',realName:'小张',wechat:'',email:''},
          ],
          targetUrl:'http://xn--djrq51c.com/zhonge4'
        },
        /*{
          createTime:'2021年7月1日',
          projName:'测试项目',
          desc:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
          progress:90,
          developers:[
            {imageIcon:'https://iconfont.alicdn.com/t/4aa049ad-74b3-434c-85dd-38219b7d653f.png', nickName:'小鳄鱼在洗澡',realName:'小张',wechat:'',email:''},
            {imageIcon:'https://iconfont.alicdn.com/t/08efc58c-2e27-47e5-97a1-769c4c70c1cd.png', nickName:'小狗再不了',realName:'小王',wechat:'',email:''},
          ]
        },
        {
          createTime:'2021年7月1日',
          projName:'测试项目',
          desc:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
          progress:90,
          developers:[
            {imageIcon:'https://iconfont.alicdn.com/t/4aa049ad-74b3-434c-85dd-38219b7d653f.png', nickName:'小鳄鱼在洗澡',realName:'小张',wechat:'',email:''},
            {imageIcon:'https://iconfont.alicdn.com/t/08efc58c-2e27-47e5-97a1-769c4c70c1cd.png', nickName:'小狗再不了',realName:'小王',wechat:'',email:''},
          ]
        },
        {
          createTime:'2021年7月1日',
          projName:'测试项目',
          desc:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
          progress:90,
          developers:[
            {imageIcon:'https://iconfont.alicdn.com/t/4aa049ad-74b3-434c-85dd-38219b7d653f.png', nickName:'小鳄鱼在洗澡',realName:'小张',wechat:'',email:''},
            {imageIcon:'https://iconfont.alicdn.com/t/08efc58c-2e27-47e5-97a1-769c4c70c1cd.png', nickName:'小狗再不了',realName:'小王',wechat:'',email:''},
          ]
        },
        {
          createTime:'2021年7月1日',
          projName:'测试项目',
          desc:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
          progress:90,
          developers:[
            {imageIcon:'https://iconfont.alicdn.com/t/4aa049ad-74b3-434c-85dd-38219b7d653f.png', nickName:'小鳄鱼在洗澡',realName:'小张',wechat:'',email:''},
            {imageIcon:'https://iconfont.alicdn.com/t/08efc58c-2e27-47e5-97a1-769c4c70c1cd.png', nickName:'小狗再不了',realName:'小王',wechat:'',email:''},
          ]
        },*/

      ],
    }
  }
}
</script>

<style scoped>

</style>
